﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="/Scripts/jquery-1.4.4.js" type="text/javascript"></script>
    <script src="/Scripts/easyWebSocket.min.js" type="text/javascript"></script>
    <script src="/Scripts/json.js" type="text/javascript"></script>
    <script src="/Scripts/WebSocketEx.js" type="text/javascript"></script>
    <script src="/Scripts/Silverlight.js" type="text/javascript"></script>
    <script src="/JS/Common.js" type="text/javascript"></script>
    <style>
        body
        {
            font-family: Arial, Helvetica, sans-serif;
        }
        #container
        {
            border: 5px solid grey;
            width: 800px;
            margin: 0 auto;
            padding: 10px;
        }
        
        #chatLog p
        {
            margin: 0;
        }
        .event
        {
            color: #999;
        }
        .warning
        {
            font-weight: bold;
            color: #CCC;
        }
    </style>
</head>
<body>
    <div id="server">
    </div>
    <div id="login">
        用户名:
        <input type="text" id="user_name" />
        <button id="btn_login">登录</button>
    </div>
    <div id="chat">
        <div id="container">
            <table>
            <tbody>
            <tr>
            <td id="chatLog" width="500">
                
            </td>
            <td id="userList" width="100">
            </td>
            </tr>
            </tbody>
            </table>
            <!-- #chatLog -->
            <div>
            发送给全体:
            <input id="chat_all" type="text" />
            </div>
            <div>
            悄悄话:
            <input id="chat_user" type="text" />
            <input id="chat_user_message" type="text" />
            </div>
        </div>
        <!-- #container -->
    </div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $("#login").hide();
        $("#chat").hide();

        var host = "ws://localhost:14502/";
        var result = connect(host,true);
        
        if (!result) {
            $("#server").html("<p>连接服务器失败,可能你的浏览器不支持WebSocket</p>");
            return;
        }
        $("#login").show();

        $('#btn_login').click(function () {
            var user_name = $("#user_name").val();
            user_name = user_name.trim();
            $("#user_name").val(user_name);
            if (user_name == "") {
                alert("请输入用户名");
                return;
            }

            command("LOGIN", user_name);
        });

        $('#chat_all').keypress(function (event) {
            if (event.keyCode == '13') {
                chat();
            }
        });

        $('#chat_user_message').keypress(function (event) {
            if (event.keyCode == '13') {
                chatuser();
            }
        });
    });

    function ERROR_Command(data) {
        alert(data);
    }

    function LOGIN_Command(data) {
        if (data == true) {
            $("#login").hide();
            $("#chat").show();

            refreshUserList();
        }
    }

    function USER_LIST_Command(data) {
        var str = "";
        for (var i = 0; i < data.List.length;i++) {
            str += "<p>" + data.List[i].Name + "</p>";
        }

        $("#userList").html(str);
    }

    function refreshUserList() {
        command("USER_LIST");
        setTimeout("refreshUserList();", 3000);
    }

    function chat() {
        var message = $("#chat_all").val();
        message = message.trim();
        if (message != "") {
            command("CHAT_ALL", message);
        }
        else {
            $("#chat_all").val("");
        }
    }

    function chatuser() {
        var user = $("#chat_user").val();
        user = user.trim();
        $("#chat_user").val(user);
        if (user == "") {
            alert("请输入用户！");
            return;
        }

        var message = $("#chat_user_message").val();
        message = message.trim();
        if (message != "") {
            var obj = new function () { };
            obj.UserName = user;
            obj.Message = message;

            command("CHAT", obj.toJSONString());
        }
        else {
            $("#chat_user_message").val("");
        }
    }

    function CHAT_Command(data) {
        $("#chatLog").append("<p>" + data + "</p>");
    }
</script>
